<template>
  <div class="container">
    <button @click="comName = 'MyLeft'">Left组件</button>
    <button @click="comName = 'MyRight'">Right组件</button>
    <!-- 动态组件，使用 <component :is="组件名"></component> 来展示组件 -->

    <!-- 加入keep-alive之后，默认，所有的动态组件，都会被保持状态，不会被销毁 -->
    <!-- include 用于指定哪些组件需要被缓存；未指定的组件都不会被缓存 -->
    <!-- exclude 用于指定哪些组件不需要被缓存；未指定的组件都会被缓存 -->

    <!-- 如果指定多个组件，多个组件之间用逗号隔开，MyLeft,MyRight 注意，千万不能加空格 -->
    <keep-alive include="MyLeft,MyRight">
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
  data () {
    return {
      comName: 'MyLeft'
    }
  },
  components: { MyLeft, MyRight }
}
</script>
